<template>
  <div class="global">
      <GlobalHeader></GlobalHeader>
      <ul class="global-list"> 
        <SearchVue></SearchVue> 
        <NavImg></NavImg>
        <Nav1></Nav1>
        <Space></Space>        
        <li class="buy-box">
          <Buy></Buy>
        </li>
        <Space></Space>        
        <li class="hot-box1"> 
          <Hot></Hot>
        </li>
        <Space></Space>        
        <li class="hot-box2"> 
          <Hot2></Hot2>
        </li>
        <li v-for="list in allList">
          <product :productList='list'></product>
        </li>
      </ul>
  </div>
</template>
<script>
import SearchVue from "./Search"
import NavImg from "./NavImg"
import Nav1 from "./Nav1"
import Space from "./Space"
import Buy from "./Buy"
import Hot from "./Hot"
import Hot2 from "./Hot2"
import product from "../common/product"
import GlobalHeader from "./GlobalHeader"
export default {
  components :{
    SearchVue,
    NavImg,
    Nav1,
    Space,
    Buy,
    Hot,
    Hot2,
    product,
    GlobalHeader
  },
  data(){
    return {
      allList:[]
    }
  },
  mounted(){
    for(var i = 1 ;i<=8;i++){
      fetch("/static/data/global/getGlobalDate"+i+".json")
      .then((res)=>{
        return res.json();
      })
      .then((res)=>{
        this.allList.push(res.data.listObj);
      })
    }
  }
 
}
</script>
<style>
.global{
  background: #f0f0f0;
  width:100%;
}
.global-list{
  margin-top:.44rem;
}
</style>
